import "../assets/fonts/RobotoMono-Light.ttf";

import { VerticalBox, HorizontalBox } from "std-widgets.slint";
import { Slider } from "slider.slint";
import { Theme, Settings, IntSettTypes } from "globals.slint";

export struct TimerConfig {
    focus-time: duration,
    shbrk-time: duration,
    lgbrk-time: duration,
    rounds: int,
}

component ValueTag inherits HorizontalLayout {
    in property<string> label;

    alignment: center;
    Rectangle {
        height: 20px;
        width: lbl.width + 10px;
        border-radius: 5px;
        background: Theme.background;

        lbl := Text {
            text: root.label;
            font-family: "Roboto Mono";
            font-weight: 800;
            color: Theme.foreground;
        }
    }
}

component TimerSlider inherits VerticalLayout {
    callback value-changed(int);

    in property<string> label;
    in property<int> min;
    in property<int> max;
    in property<string> tail;
    in property<color> sl-color;

    in-out property<int> value <=> sldr.value;

    alignment: end;


    Text {
        text: root.label;
        horizontal-alignment: center;
        font-size: 11pt;
        color: Theme.foreground-darker;
    }
    ValueTag {
        label: "\{sldr.value}\{root.tail}";
    }
    Rectangle {
        sldr := Slider {
            width: parent.width;
            height: 20px;
            value: 1;
            minimum: root.min;
            maximum: root.max;
            color: root.sl-color;
            ft-color: root.sl-color;
            ghv-color: root.sl-color;
            mt-color: Theme.background;
            value-changed(int) => {
                root.value-changed(int)
            }
        }
    }
}

export component TimerConfigPage inherits Rectangle {
    in-out property <TimerConfig> config: {
        focus-time: focus-slider.value * 60s,
        shbrk-time: shbrk-slider.value * 60s,
        lgbrk-time: lngbrk-slider.value * 60s,
        rounds: round-slider.value,
    };

    background: Theme.background-light;
    VerticalBox {
        Text {
            text: "Timer";
            horizontal-alignment: center;
            font-size: 11pt;
            color: Theme.foreground;
        }
        focus-slider := TimerSlider {
            label: "Focus";
            min: 1;
            max: 90;
            value <=> Settings.time-work;
            tail: ":00";
            sl-color: Theme.focus-round;
            value-changed(int) => {
                Settings.int-changed(IntSettTypes.Work, int);
            }
        }
        shbrk-slider := TimerSlider {
            label: "Short Break";
            min: 1;
            max: 90;
            value <=> Settings.time-short-break;
            tail: ":00";
            sl-color: Theme.short-round;
            value-changed(int) => {
                Settings.int-changed(IntSettTypes.ShortBreak, int);
            }
        }
        lngbrk-slider := TimerSlider {
            label: "Long Break";
            min: 1;
            max: 90;
            value <=> Settings.time-long-break;
            tail: ":00";
            sl-color: Theme.long-round;
            value-changed(int) => {
                Settings.int-changed(IntSettTypes.LongBreak, int);
            }
        }
        round-slider := TimerSlider {
            label: "Round";
            min: 1;
            max: 12;
            value <=> Settings.work-rounds;
            sl-color: Theme.background-lightest;
            value-changed(int) => {
                Settings.int-changed(IntSettTypes.Rounds, int);
            }
        }
        Text {
            text: "Reset Defaults";
            font-size: 11pt;
            horizontal-alignment: center;
            rd-ta := TouchArea {
                clicked => {
                    Settings.int-changed(IntSettTypes.Work, 25);
                    Settings.int-changed(IntSettTypes.ShortBreak, 5);
                    Settings.int-changed(IntSettTypes.LongBreak, 15);
                    Settings.int-changed(IntSettTypes.Rounds, 4);
                }
            }

            states [
                on-hvr when rd-ta.has-hover: {
                    color: Theme.accent;
                }
                off-hvr when !rd-ta.has-hover: {
                    color: Theme.background-lightest;
                }
            ]
        }
    }
}